<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo">
        <experiment-two-tone />
        <div class="a">上海正也医药有限公司</div>
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <user-outlined />
              <span>功能A</span>
            </span>
          </template>
          <a-menu-item key="1">功能A1</a-menu-item>
          <a-menu-item key="2">功能A2</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
            <span>
              <user-outlined />
              <span>功能B</span>
            </span>
          </template>
          <a-menu-item key="3">功能B1</a-menu-item>
          <a-menu-item key="4">功能B2</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
            <span>
              <user-outlined />
              <span>功能C</span>
            </span>
          </template>
          <a-menu-item key="5">功能C1</a-menu-item>
          <a-menu-item key="6">功能C1</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub4">
          <template #title>
            <span>
              <team-outlined />
              <span>功能D</span>
            </span>
          </template>
          <a-menu-item key="7">功能D1</a-menu-item>
          <a-menu-item key="8">功能D2</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub5">
          <template #title>
            <span>
              <team-outlined />
              <span>功能F</span>
            </span>
          </template>
          <a-menu-item key="9">功能F1</a-menu-item>
          <a-menu-item key="10">功能F2</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub6">
          <template #title>
            <span>
              <team-outlined />
              <span>功能G</span>
            </span>
          </template>
          <a-menu-item key="11">功能G1</a-menu-item>
          <a-menu-item key="12">功能G2</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <div class="icon">
          <div>
            <span>
              <bank-filled />
            </span>
            <span>首页</span>
          </div>

          <div>
            <span>
              <cloud-filled />
            </span>
            <span>主数据</span>
          </div>
          <div>
            <span>
              <build-filled />
            </span>
            <span>辖区管理</span>
          </div>
          <div class="icon4">
            <div>
              <wechat-filled />
            </div>
            <div>
              <h3>销讯通</h3>
              <div class="foot">行为管理系统</div>
            </div>
          </div>
        </div>
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <div class="title">协议主体</div>
        </a-breadcrumb>
        <div
          :style="{ padding: '24px', background: '#fff', minHeight: '240px' }"
        >
          <div class="box">
            <div>
              <span style="color: red">*</span> 协议客户：<input
                type="text"
                class="input"
              />上海正也医药有限公司
              <br />
              进购指标：<select value="金额">
                <option value="金额">金 额</option></select
              ><input type="text" placeholder="输入金额/数量" /><br />
              销售区域：<button>选择区域</button><br />
              进购渠道：<select name="" id="">
                <option value="指定渠道">指定渠道</option></select
              ><button>请选择渠道</button>
            </div>
            <div>
              协议状态：<select name="" id="">
                <option value="正常">正常</option></select
              ><br />
              纯销指标：<select name="" id="">
                <option value="金额">金额</option></select
              ><input type="text" placeholder="输入金额/数量" /><br />
              签订时间：<input type="text" value="2020-02-01 18:25" />
            </div>
          </div>
          <div>
            <template>
              <a-table :dataSource="content" :columns="columns" />
            </template>
          </div>
        </div>
      </a-layout-content>
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <div class="title">产品政策</div>
        </a-breadcrumb>
        <div
          :style="{ padding: '24px', background: '#fff', minHeight: '240px' }"
        >
          <div>
            
          </div>
        </div>
      </a-layout-content>
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <div class="title">补充协议</div>
        </a-breadcrumb>
        <div
          :style="{ padding: '24px', background: '#fff', minHeight: '240px' }"
        >
        
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
  BankFilled,
  CloudFilled,
  BuildFilled,
  WechatFilled,
  ExperimentTwoTone,
} from "@ant-design/icons-vue";
export default {
  data() {
    return {
      collapsed: false,
      selectedKeys: ["1"],
      content: [
        {
          key: "1",
          name: "宁波九州通药业有限公司",
          number: "BJ000090",
          address: "浙江省",
        },
        {
          key: "2",
          name: "国药控股精华有限公司",
          number: "BJ00019",
          address: "浙江省",
        },
        {
          key: "3",
          name: "老百姓药业有限公司",
          number: "BJ000283",
          address: "浙江省",
        },
      ],
      columns: [
        {
          title: "指定渠道编码",
          dataIndex: "number",
          key: "number",
        },
        {
          title: "指定渠道名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "所在省",
          dataIndex: "address",
          key: "address",
        },
      ],
    };
  },
  components: {
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
    BankFilled,
    CloudFilled,
    BuildFilled,
    WechatFilled,
    ExperimentTwoTone,
  },
};
</script>
<style scoped>
:deep(.anticon) {
  font-size: 25px;
}
.icon {
  display: flex;
  /* width: 400px;
  justify-content: space-between; */
}
.icon div {
  margin-left: 50px;
}
.icon span {
  display: inline-block;
}
.icon div span:nth-child(1) {
  margin-right: 5px;
}
.box {
  display: flex;
  justify-content: space-between;
}
.box div {
  width: 40%;
}
.icon .icon4 {
  display: flex;
  position: relative;
}
.icon .foot {
  position: absolute;
  top: 18px;
  margin: 0;
  width: 100px;
}
.icon4 div:nth-child(2) {
  margin-top: -10px;
  margin-left: 5px;
}
.icon4 h3 {
  font-weight: 700;
  text-indent: 5px;
}
:deep(.anticon-experiment) {
  font-size: 40px;
  width: 100%;
  margin: 0 auto;
}
.loge {
  text-align: center;
  color: white;
  margin-bottom: 20px;
}
.a {
  color: #fff;
  text-align: center;
}
:deep(.ant-layout-content) {
  height: 300px;
  margin: 0;
}
.title {
  width: 100%;
  text-align: center;
}
button {
  width: 90px;
  margin-right: 20px;
  margin-bottom: 10px;
}
select {
  width: 90px;
  text-align: center;
  margin-right: 20px;
  margin-bottom: 10px;
}
.input {
  width: 90px;
  margin-right: 20px;
  margin-bottom: 10px;
}
input {
  outline: none;
  border: 1px solid #ccc;
}
</style>
